<template>
  <div>
    <div style="margin-top: 15px; width: 80%; margin-left: 50px">
      <el-input style="width: 400px; margin-right: 10px" placeholder="请输入要搜索的店铺" v-model="form.shopName" clearable>
      </el-input>
      <el-date-picker
        style="margin-right: 10px; width: 450px"
        v-model="form.dateRange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-autocomplete v-model="tenantName" style="width:200px; margin-right: 10px" :fetch-suggestions="queryTenantAsync"
                       placeholder="搜索所属客户" @select="handleTenantSelect" clearable @change="handleTenantChange"></el-autocomplete>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <el-row style="margin-top: 20px; margin-left: 50px">
      <el-col :span="8" :key="index" v-for="(data, index) in dataList" v-loading="loading">
        <el-card style="width: 480px;">
          <div slot="header" class="clearfix">
            <span>{{ data.shopName }}</span>
            <!--            <el-button style="float: right; padding: 3px 0" type="text" @click="openCard(data)">编辑</el-button>-->
          </div>
          <el-row style="margin-top: 20px; margin-left: 50px">
            <el-col :span="12">
              <div class="text item">
                {{ '订单总金额: ￥' + data.totalTicketAmount }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="text item">
                <el-tag type="summary">{{ '总订单量: ' + data.totalTicketCount + '单' }}</el-tag>
              </div>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px; margin-left: 50px">
            <el-col :span="12">
              <div class="text item">
                {{ '拍单总成本: ￥' + data.totalBuyAmount }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="text item">
                <el-tag type="success">{{ '有效订单量: ' + data.totalActiveTicketCount + '单' }}</el-tag>
              </div>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px; margin-left: 50px">
            <el-col :span="12">
              <div class="text item">
                {{ '总利润: ￥' + data.totalProfitAmount }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="text item">
                <el-tag type="danger">{{ '退款订单数: ' + data.totalRefundTicketCount + '单' }}</el-tag>
              </div>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px; margin-left: 50px">
            <el-col :span="12">
              <div class="text item">
                {{ '总利润率: ' + data.totalProfitRate }}
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <avue-form :option="formOption"
                 v-model="formData">
      </avue-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false; formData = {}">取 消</el-button>
    <el-button type="primary" @click="submitInfo">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {statics} from "@/api/ticket/custom_ticket";
import {getDetail, update} from "@/api/shop/shop";
import {getSelect as tenantSelect} from "@/api/system/tenant";

export default {
  name: "statics",
  data() {
    return {
      tenantName: '',
      tenantList: [],
      dataList: [],
      loading: false,
      dialogVisible: false,
      form: {
        shopName: '',
        dateRange: ''
      },
      option: {
        column: [{
          label: '店铺',
          prop: 'shopName'
        }]
      },
      formData: {},
      formOption: {
        labelWidth: 110,
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "支付订单数",
            prop: "payCount",
            type: 'number',
            span: 24,
            row: true
          },
          {
            label: "支付买家数",
            prop: "payUserCount",
            type: 'number',
            span: 24,
            row: true
          },
          {
            label: "实时访客数",
            prop: "visitUserCount",
            type: 'number',
            span: 24,
            row: true
          },
          {
            label: "实时浏览量",
            prop: "watchCount",
            type: 'number',
            span: 24,
            row: true
          }
        ]
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '今日',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0, 0, 0, 0)
              end.setHours(23, 59, 59, 999)
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '昨日',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0, 0, 0, 0)
              end.setHours(23, 59, 59, 999)
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0, 0, 0, 0)
              end.setHours(23, 59, 59, 999)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0, 0, 0, 0)
              end.setHours(23, 59, 59, 999)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0, 0, 0, 0)
              end.setHours(23, 59, 59, 999)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0, 0, 0, 0)
              end.setHours(23, 59, 59, 999)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          }]
      }
    };
  },
  mounted() {
    this.onLoad()
    this.loadTenantList()
  },
  methods: {
    handleTenantSelect(val) {
      this.form.tenantId = val.id
    },
    handleTenantChange(val) {
      if (val === '') {
        this.form.tenantId = ''
      }
    },
    queryTenantAsync(queryString, cb) {
      const restaurants = this.tenantList;
      const results = queryString ? restaurants.filter(this.createTenantStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createTenantStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadTenantList() {
      tenantSelect().then(res => {
        this.tenantList = res.data.data.map(item => {
          return {value: item.tenantName, id: item.tenantId}
        })
      })
    },
    submitInfo() {
      update(this.formData).then(() => {
        this.formData = {}
        this.dialogVisible = false
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    openCard(data) {
      this.dialogVisible = true
      getDetail(data.shopId).then(res => {
        const data = res.data.data
        if (data.payCount === -1) {
          data.payCount = 0
        }
        if (data.payUserCount === -1) {
          data.payUserCount = 0
        }
        if (data.visitUserCount === -1) {
          data.visitUserCount = 0
        }
        if (data.watchCount === -1) {
          data.watchCount = 0
        }
        this.formData = data
      });
    },
    onLoad() {
      this.loading = true
      statics({}).then(res => {
        this.dataList = res.data.data
        this.loading = false
      })
    },
    search() {
      const params = {}
      if (this.form.shopName && this.form.shopName !== '') {
        params.shopName = this.form.shopName
      }
      if (this.form.dateRange && this.form.dateRange !== '' && this.form.dateRange !== null) {
        params.startTime = this.form.dateRange[0]
        params.endTime = this.form.dateRange[1]
      }
      if (this.form.tenantId && this.form.tenantId !== '') {
        params.tenantId = this.form.tenantId
      }
      this.loading = true
      statics(params).then(res => {
        this.dataList = res.data.data
        this.loading = false
      })
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
